<template>
  <div>

    <!--      标题-->
    <div class="top1">
      <h3>小默盒管家</h3>
    </div>

    <!--      轮播图-->
    <div class="img1">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="i in images" :key="i.id">
          <img class="img2" :src="i.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--    搜索框-->
    <div class="searchbox">
      <van-search v-model="value" @click="parceltracking()" placeholder="查询包裹"/>
    </div>
    <!--    四个主功能-->
    <div class="function">
      <!--      我的派件-->
      <div class="delivery">
        <img class="img3" src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E5%B0%8F%E4%BA%BA"
             alt="网络超时"><br>
        <van-button type="primary" size="mini" @click="MyDeliveries" class="van1">我的派件</van-button>
      </div>

      <!--      我的揽收  暂时不写-->
      <div @click="getLocation" class="lanshou">
        <img class="img3" src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E6%8F%BD%E6%94%B6"
             alt="网络超时"><br>
        <van-button type="primary" size="mini" @click="" class="van1">获取地址</van-button>
      </div>

      <!--      附近智能柜-->
      <div class="smartCabinets">
        <img class="img3" src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E6%89%AB%E6%8F%8F"
             alt="网络超时"><br>
        <van-button type="primary" size="mini" @click="smartlockersnearby()" class="van1">附近智能柜</van-button>
      </div>

      <!--      扫码登柜-->
      <div class="docking" @click="ScanTheCode">
        <img class="img3" src="https://myimagezxy1.oss-cn-beijing.aliyuncs.com/lsz/%E5%AE%9A%E4%BD%8D"
             alt="网络超时"><br>
        <van-button type="primary" size="mini" class="van1">扫码登柜</van-button>
      </div>


      <!--    底部导航栏-->
      <div>
        <van-tabbar v-model="active">
          <van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
          <van-tabbar-item name="message" to="/newsCenter" icon="chat-o" dot>消息</van-tabbar-item>
          <van-tabbar-item name="my" icon="friends-o" @click="my">我的</van-tabbar-item>
        </van-tabbar>
      </div>

    </div>

  </div>
</template>


<script>
import {findcarousel} from "@/api/Home/Carousel/carousel";
import {ReverseGeocoding} from "@/api/cabinetmachine/CabinetMachine";
import {Dialog} from "vant";


export default {
  name: 'Home',
  data() {
    return {
      images: [],
      active: 'home',
      value: '',
      login: JSON.parse(localStorage.getItem('login')),
      latitude: null,
      longitude: null,
      error: null
    };
  },
  methods: {
    /*  跳转导扫码登柜页面  */
    ScanTheCode() {
      console.log(this.login.realNameStatus)
      if (this.login.realNameStatus == 1) {
        this.$router.push('/parceltracking/ParcelTracking')
      } else {
        Dialog.confirm({
          title: '请先实名认证',
          message: '是否跳转实名认证页面？',
        }).then(() => {
          // 用户点击确认按钮后的操作
          this.$router.push('/certification')
        }).catch(() => {
          // 用户点击取消按钮后的操作
        });
      }
    },


    /* 跳转到附近智能柜  */
    smartlockersnearby() {
      if (this.login.realNameStatus == 1) {
        this.$router.push({path: '/smartlockersnearby/SmartlockersNearby'})
      } else {
        Dialog.confirm({
          title: '请先实名认证',
          message: '是否跳转实名认证页面？',
        }).then(() => {
          // 用户点击确认按钮后的操作
          this.$router.push('/certification')
        }).catch(() => {
          // 用户点击取消按钮后的操作
        });
      }
    },
    /*  跳转到我的派件页面 */
    MyDeliveries() {
      if (this.login.realNameStatus == 1) {
        this.$router.push({
          path: '/index/Index'
        })
      } else {
        Dialog.confirm({
          title: '请先实名认证',
          message: '是否跳转实名认证页面？',
        }).then(() => {
          // 用户点击确认按钮后的操作
          this.$router.push('/certification')
        }).catch(() => {
          // 用户点击取消按钮后的操作
        });
      }
    },
    /*  跳转到查询包裹页面 */
    parceltracking() {
      if (this.login.realNameStatus == 1) {
        this.$router.push({path: '/parceltracking/ParcelTracking'})
      } else {
        Dialog.confirm({
          title: '请先实名认证',
          message: '是否跳转实名认证页面？',
        }).then(() => {
          // 用户点击确认按钮后的操作
          this.$router.push('/certification')
        }).catch(() => {
          // 用户点击取消按钮后的操作
        });
      }
    },
    /* 查找轮播图方法 */
    findimg1() {
      findcarousel().then(res => {
        this.images = res.data.data;
      })
    },
    // 跳转到我的页面
    my() {
      // this.$router.push({path: '/my'})
      this.$router.push({path: '/mine'})
    },
    // 获取用户的地理位置信息
    getLocation() {
      console.log('getLocation 方法被调用');

      if (!navigator.geolocation) {
        this.error = '你的浏览器不支持 Geolocation API';
        console.error(this.error);
        return;
      }

      navigator.geolocation.getCurrentPosition(
          (position) => {
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;
            console.log(`纬度：${this.latitude}, 经度：${this.longitude}`);
            this.ReverseGeocoding(this.latitude, this.longitude);
          },
          (error) => {
            this.error = `获取位置失败: ${error.message}`;
            console.error(this.error);

            switch (error.code) {
              case error.PERMISSION_DENIED:
                this.error = "用户拒绝了地理位置请求。";
                break;
              case error.POSITION_UNAVAILABLE:
                this.error = "当前位置无法获取。";
                break;
              case error.TIMEOUT:
                this.error = "请求用户地理位置超时。";
                break;
              case error.UNKNOWN_ERROR:
                this.error = "未知错误。";
                break;
            }

            alert(this.error);
          },
          {enableHighAccuracy: true, timeout: 5000, maximumAge: 0}
      );
    },

    ReverseGeocoding(latitude,longitude) {
      longitude=116.208741;
      latitude=40.136902;
      ReverseGeocoding(latitude,longitude).then(res => {
        console.log(res.data.data)
        alert(res.data.data)
      })
    },

  },
  created() {
    this.findimg1();
  }
};
</script>


<style>
.aaaa {
  width: 200px;
  height: 100px;
//border: 1px solid red; margin-top: 50px;
}


/* 四个主功能样式 */
.van1 {
  margin-top: 5px;
  margin-left: 0px;
}

/* 顶部样式 */
.top1 {
  width: 100%;
  height: 100%;

  top: 0;
  /* 固定定位 */
  position: fixed;
  /* float: left; */
  margin-top: 0;
  margin-bottom: 0;

  /* border: 1px solid red; */
}

/* 轮播图盒子 */
.img1 {
  width: 100%;
  height: 250px;
}

/* 轮播图图片样式 */
.img2 {
  margin: auto;
  width: 100%;
  height: 200px;
//border: 1px solid red;

}

/* 搜索框盒子 */
.searchbox {
  margin-top: 10px;
  border: 1px solid #f5f5f5;
}

/* 围住四个功能的盒子 */
.function {
  width: 100%;
  height: 270px;
  margin-top: 20px;
//border: 1px solid red;

}

/* 我的派件 */
.delivery {
  width: 180px;
  height: 120px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid #f5f5f5;

}

/* 我的揽收 */
.lanshou {
  width: 180px;
  height: 120px;
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  border: 1px solid #f5f5f5;

}

/* 附近智能柜 */
.smartCabinets {
  width: 180px;
  height: 120px;
  border: 1px solid #f5f5f5;
  float: left;
  margin-left: 10px;
  margin-top: 10px;

}

/* 扫码登柜 */
.docking {
  width: 180px;
  height: 120px;
  border: 1px solid #f5f5f5;
//border: 1px solid red; float: left; margin-left: 10px; margin-top: 10px;

}

/* 四个功能图片样式 */
.img3 {
  margin-top: 10px;
}
</style>


